@import '../style/mixins/index';
@import '../style/theme/color';
@import '../style/theme/shadow';
@import '../style/theme/corner';
@import '../style/core/_font';
@import '../style/core/animation';

:host::ng-deep a {
  &:link,
  &:visited {
    color: $devui-link-light;
  }

  &:hover,
  &:active {
    color: $devui-link-light-active;
  }
}

.devui-toast {
  position: fixed;
  top: 50px;
  right: 20px;
  width: 20em;
  word-break: normal;
  word-wrap: break-word;
}

.devui-toast-item-container {
  position: relative;
  left: 150%;
  margin: 0 0 10px 0;
  opacity: 0.95;
  filter: alpha(opacity=95);
  box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow;
  border-radius: $devui-border-radius-feedback;
  color: $devui-feedback-overlay-text;
  transition: all $devui-animation-duration-slow $devui-animation-ease-in-smooth;
  background-color: $devui-feedback-overlay-bg;

  &.slide-in {
    left: 0;
  }
}

.devui-toast-item {
  position: relative;
  display: block;
  padding: 12px 16px;
}

.devui-toast-item p {
  padding: 0;
  margin: 0;
}

.devui-toast-icon-close {
  position: absolute;
  top: 7px;
  right: 10px;
  cursor: pointer;

  .devui-toast-close-icon {
    fill: $devui-light-text;
  }
}

.devui-toast-title {
  font-size: $devui-font-size-card-title;
  padding: 0 0 calc(0.5em - 2px) 0;
  display: block;
  font-weight: 700;
}

.devui-toast-image {
  position: absolute;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  left: 16px;
  top: 14px;
  padding: 0;

  &.devui-toast-image-warning {
    path.devui-icon-warning-outer {
      fill: $devui-warning-line;
    }

    path.devui-icon-warning-inner {
      fill: $devui-light-text;
      stroke: $devui-light-text;
    }
  }

  &.devui-toast-image-info {
    background-color: $devui-info;
  }

  &.devui-toast-image-error {
    background-color: $devui-danger;
  }

  &.devui-toast-image-success {
    background-color: $devui-success;
  }

  .devui-toast-image-info-path,
  .devui-toast-image-error-path,
  .devui-toast-image-success-path {
    fill: $devui-light-text;
  }
}

.devui-toast-message {
  margin-left: 20px;

  p {
    padding: 0 8px 0 4px;
  }

  span.devui-toast-title + p {
    padding: 0;
  }
}

.devui-toast-message-common .devui-toast-message {
  margin-left: 0;
}

.devui-toast-message p {
  font-size: $devui-font-size;
  margin-top: 2px;
}
